<style>
    div.buttons{
        background-image: url("/easyui/images/linkbutton_bg.png");
        background-position: right 0;
        background-repeat: no-repeat;
        border-radius: 5px 5px 5px 5px;
        color: #444444;
        cursor: pointer;
        display: inline-block;
        float: right;
        font-size: 12px;
        height: 24px;
        outline: medium none;
        padding-right: 18px;
        text-decoration: none;
        float: left;
    }
    input[type="submit"],input[type="button"]{
        background: url("/easyui/images/button_span_bg.gif") no-repeat scroll left top transparent;
        display: inline-block;
        height: 24px;
        line-height: 18px;
        padding: 4px 0 4px 18px;
        border: 0;
    }
    div.row label{
        min-width: 80px;
    }
    input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
        cursor:pointer;
    }
    select.combo{
        width: auto;
    }
    div#time1,div#time2,input#Imgs_ctime, input#Imgs_utime{
        float: left;
        display: inline-block;
    }
    div#time1{
        margin-right: 20px;;
    }
    img.clock{
        display: none;
    }
    div#ui-datepicker-div{display: none;}
</style>
<link rel="stylesheet" type="text/css" href="/ui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="/ui/themes/icon.css" />

<link rel="stylesheet" type="text/css" href="/time/css/ui/base/ui.core.css" />
<link rel="stylesheet" type="text/css" href="/time/css/ui/base/ui.theme.css" />
<link rel="stylesheet" type="text/css" href="/time/css/ui/base/ui.slider.css" />
<link rel="stylesheet" type="text/css" href="/time/css/jquery.timepicker.css" />
<script type="text/javascript" src="/time/lib/jquery.jtimepicker.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#time1').jtimepicker({
            'hourCombo':'h1',
            'minCombo':'m1',
            'secCombo':'s1',
            'hourDefaultValue':<?php echo isset($h1) ? $h1 : 0;?>,
            'minDefaultValue':<?php echo isset($m1) ? $m1 : 0;?>,
            'secDefaultValue':<?php echo isset($s1) ? $s1 : 0;?>
//            'clockIcon':'/time/images/icon_clock_2.gif'
        });
        $('#time2').jtimepicker({
            'hourCombo':'h2',
            'minCombo':'m2',
            'secCombo':'s2',
            'hourDefaultValue':<?php echo isset($h2) ? $h2 : 0;?>,
            'minDefaultValue':<?php echo isset($m2) ? $m2 : 0;?>,
            'secDefaultValue':<?php echo isset($s2) ? $s2 : 0;?>
//            'clockIcon':'/time/images/icon_clock_2.gif'
        });
    });
</script>

<div class="form" style="border: 1px solid #99BBE8;padding: 20px 0;width: 100%;display: inline-block;">
<?php
$form=$this->beginWidget('bootstrap.widgets.TbActiveForm', array(
    'id'=>'Ajax_google_code',
    'enableAjaxValidation'=>false,
    //'htmlOptions'=>array('enctype'=>'multipart/form-data'),
    'htmlOptions'=>array('style'=>'margin: 0 0 20px 60px;'),
));
?>
<div class="row">
    <?php echo $form->labelEx($model, '起止日期'); ?>
    <input class="easyui-datetimebox" value="<?php echo isset($ctime) ? $ctime : ''; ?>" style="width:150px" name='ctime' id="ctime" />
    <input class="easyui-datetimebox" value="<?php echo isset($utime) ? $utime : ''; ?>" style="width:150px" name='utime' id="utime" />
</div>


    <div class="row" >
        <?php
//        $user_r = array();
//        $users = User::model()->findAll();
//        foreach($users as $user){
//            $user_r[$user->id]=$user->username;
//        }
        $user_r=getGroupUser(Yii::app());

        echo $form->dropDownListRow($model, 'uid', $user_r);  ?>
    </div>

    <div class="row">
        <?php
        $speed_r = array('50'=>'快','200'=>'中', '350'=>'慢');
        echo $form->dropDownListRow($model, 'order', $speed_r);  ?>
    </div>

    <div class="row buttons">
        <?php echo CHtml::submitButton($model->isNewRecord ? Yii::t('admin/Common', '查看') : Yii::t('admin/Common', '查看')); ?>
    </div>
<div class="row buttons" style="margin-left: 20px;">
<input type="button" onclick="replay();" value="重新播放">
</div>
    <div style="margin:10px 0;float: left;clear: both;display: none;">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#map').dialog('open')">打开窗口</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#map').dialog('close')">关闭窗口</a>
    </div>
    <?php $this->endWidget(); ?>

    <?php  Yii::app()->clientScript->registerCoreScript('jquery')?>
    <script src="http://maps.google.com/maps/api/js?v=3.1&sensor=true" type="text/javascript"></script>

<input type="hidden" id="uid" value="<?php echo $uid ?>" />
<input type="hidden" id="speed" value="<?php echo $speed ?>" />


<script type="text/javascript">

/**
 * 轨迹回放
 * 参数coordinate（"x,y;x,y;"）,time(毫秒数)
 * x:经度，y:纬度
 */
function TrackPlayback(coordinate,time){
    clearLastMapInfo();
    var coordinate = coordinate+'';
    if(coordinate!=''){
        coordinate = coordinate.substring(0,coordinate.length-1);
        var devArr = coordinate.split(";");
        var ipCoordinates = new Array();
        var ipArr = [];
        var len = devArr.length;
        for(var i=0;i<len;i++){
            var dev = devArr[i].split(',');
            ipCoordinates[i] = new google.maps.LatLng(dev[1], dev[0]);
            ipArr[i] = dev[1]+","+dev[0];
        }
        flightPath = new google.maps.Polyline({
            path: ipCoordinates,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });
        flightPath.setMap(map);

        var init = 0;
        var index = 0;
        timer = window.setInterval(function() {

            if (index != undefined && init <= 10 && index < len - 1) {
                var subIp1 = ipArr[index + 1].split(',');
                var subIp2 = ipArr[index].split(',');

                var subIpx = subIp1[0]*init/10 + subIp2[0]*(10-init)/10;
                var subIpy = subIp1[1]*init/10 + subIp2[1]*(10-init)/10;
                if(marker!=null){
                    marker.setMap(null);
                }
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(subIpx, subIpy),
                    icon: image,
                    map: map
                });
                init ++ ;
                if(init > 10) {
                    index ++;
                    init = 0;
                }
            } else {
                window.clearInterval(timer);
            }
        }, time);
    }

}

/**
 * 清除图标
 */
function clearOverlays() {
    if (markerArr) {
        for (i in markerArr) {
            markerArr[i].setMap(null);
        }
    }
    markerArr.length = 0;
}

/**
 * 清除自定义提示层信息
 */
function clearTipInfo(){
    if (nameOverlayArr) {
        for (i in nameOverlayArr) {
            nameOverlayArr[i].onRemove();
        }
    }
    nameOverlayArr.length = 0;
}

var map,timer;
var marker ; //轨迹回放图标
var flightPath ;// 轨迹回放路径
var markerArr = [] ;//图标展示数组
var image = <?php echo Yii::app()->request->baseUrl; ?>'/images/man.png';; //轨迹回放图标
var nameOverlayArr  = []; //自定义提示层信息数组
var out2= '';
var speed= 200;

function replay(){
//    var str2 = "114.041,22.5402;114.0695,22.5601;114.0995,22.5501;114.1095,22.5601";
    TrackPlayback(out2,speed);
}


/**
 * 清除上次地图信息
 */
function clearLastMapInfo(){
    clearOverlays();
    if(marker!=null){
        marker.setMap(null); //清除轨迹回放图标
    }
    if(flightPath!=null){
        flightPath.setMap(null); //清除轨迹回放路径
    }
    clearTipInfo();
}

        var array ;//google地图坐标数组
        var map;// 地图对象
        var directionsService = new google.maps.DirectionsService();
        var directionDisplay;
        var path = null,timer = 0,index = 0,marker = null;
        function init() {
			var utime = $('#utime').val();
            var ctime = $('#ctime').val();
            var uid = $('#uid').val();
            var speed = $('#speed').val();



            $.ajax({
                type: "GET",
                url: "/index.php/imgs/Ajax_google_data_v20130124",
                data: "ctime="+ctime+"&utime="+utime+"&uid="+uid+"&speed="+speed,
                success: function(msg){
                    if(msg == null || msg.out1 == ""){
                        alert('没有找到数据，请重新设置查询条件');
                        return false;
                    }
                    directionsDisplay = new google.maps.DirectionsRenderer();
                   // var coor = new google.maps.LatLng(msg.outmid['latitude'],msg.outmid['longitude']);
                    var coor = new google.maps.LatLng(msg.outmid['latitude'],msg.outmid['longitude']);
                    map = new google.maps.Map(document.getElementById("map"), { zoom: 12,disableDefaultUI: true, center: coor, mapTypeControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP });

                    directionsDisplay.setMap(map);
                    function setMarckers(map,locations){
                        linearray = new Array();
                        for(var i = 0;i < locations.length;i++){
                            var number = locations[i].number;
                            var longitude = locations[i].longitude;
                            var latitude = locations[i].latitude;
                            var address = locations[i].content;
                            var title = address;
                            var mylatlng = new google.maps.LatLng(latitude,longitude);
                            linearray[i] = mylatlng;
                            var marker = new google.maps.Marker({
                                position: mylatlng,
                                map: map
                            });
                            set_event(map,marker,title);
                        }
                        setMarckersline(linearray);
                    }

                    function setMarckersline(linearray){
                        var flightPath = new google.maps.Polyline({
                            path: linearray,
                            strokeColor: "#FF0000",
                            strokeOpacity: 1.0,
                            strokeWeight: 2   });

                        flightPath.setMap(map);
                    }

                    function setMarckersshop(map,locations){
            			  var shop = <?php echo Yii::app()->request->baseUrl; ?>'/images/shop.png';
            			  var factory = <?php echo Yii::app()->request->baseUrl; ?>'/images/factory.png';
            			  var depot = <?php echo Yii::app()->request->baseUrl; ?>'/images/depot.png';
                        var shop_del = <?php echo Yii::app()->request->baseUrl; ?>'/images/shop_del.png';
                        var factory_del = <?php echo Yii::app()->request->baseUrl; ?>'/images/factory_del.png';
                        var depot_del = <?php echo Yii::app()->request->baseUrl; ?>'/images/depot_del.png';

                        for(var i = 0;i < locations.length;i++){
                            if(locations[i].type ==0){var image = shop;};
                            if(locations[i].type ==1){var image = factory;};
                            if(locations[i].type ==2){var image = depot;};
                            if(locations[i].type ==10){var image = shop_del;};
                            if(locations[i].type ==11){var image = factory_del;};
                            if(locations[i].type ==12){var image = depot_del;};
                            console.log(1);
                            var number = locations[i].number;
                            var longitude = locations[i].longitude;
                            var latitude = locations[i].latitude;
                            var address = locations[i].content;
                            var title = address;
                            var mylatlng = new google.maps.LatLng(latitude,longitude);
                            var marker = new google.maps.Marker({
                                position: mylatlng,
                                map: map,
                                icon: image
                            });
                            set_event(map,marker,title);
                        }
                    }
                        function set_event(map,marker,title){
                            //设置窗口显示信息
                            var infowindow = new google.maps.InfoWindow({
                                content: title
                            });
                            //注册图标事件
                            google.maps.event.addListener(marker,'mouseover',function() {
                                    infowindow.open(map,marker);
                            });
                            google.maps.event.addListener(marker, 'mouseout',function() {
                                    infowindow.close();
                            });
                        }


//          	     array = msg;
                    setMarckersshop(map,msg.outshop);
                	setMarckers(map,msg.out1);
                    var request = {
                        origin: msg.outstart['location'],//起始上班地点 (北京市南坞坐标)
                        destination: msg.outend['location'],//结束上班地点 （北京市人民大学坐标）
                        //waypoint 包括以下字段：
                        //•location（必需）指定路标的地址。
                        //•stopover（可选）指示此路标是路线上的实际停留点 (true)，还是仅为通过指定位置 (false) 的路线首选项。默认情况下，中途停留为 true。
                        waypoints:
                               msg.out,
//                         [
//                             {location:"39.961497,116.284018",stopover:true},
//                             {location:"39.966464,116.283417",stopover:true},
//                             {location:"39.966925,116.28861",stopover:true},
//                             {location:"39.966464,116.283417",stopover:true},
//                             {location:"39.961497,116.284018",stopover:true}
//                         ],

                        optimizeWaypoints: true,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    };

                    TrackPlayback(msg.out2,msg.speed);
                    speed = msg.speed;
                    out2 = msg.out2;

                    /*
                        Google Maps API 需要调用外部服务器，因此，对路线服务的访问是异步的。为此，您需要传递一个回调方法，以在请求完成后执行。此回调方法将会对结果进行处理。请注意，路线服务可能以单独 routes[] 数组的形式传回多个可能的行程。

                        要在 V3 中使用路线，请创建一个类型为 DirectionsService 的对象，并调用 DirectionsService.route() 向路线服务发送一条请求，方法是为其传递一个 DirectionsRequest 对象常量，其中包含输入项和一个回调方法，该回调方法将会在收到响应后执行。
                        DirectionsRequest 对象常量包含下列字段：
                        {   origin: LatLng | String,   destination: LatLng | String,   travelMode: TravelMode,   unitSystem: UnitSystem,   waypoints[]: DirectionsWaypoint,   optimizeWaypoints: Boolean,   provideRouteAlternatives: Boolean,   avoidHighways: Boolean,   avoidTolls: Boolean   region: String }下面对这些字段进行了说明：

                        •origin（必需）指定计算路线时所用的起始地点。该值可以指定为 String（如“Chicago, IL”），也可以指定为 LatLng 值。
                        •destination（必需）指定计算路线时所用的结束地点。该值可以指定为 String（如“Chicago, IL”），也可以指定为 LatLng 值。
                        •travelMode（必需）指定计算路线时所用的交通方式。在下面的出行方式中指定有效值。
                        •unitSystem（可选）指定显示结果时使用的单位制。在下面的单位制中指定有效值。

                        •waypoints[]（可选）指定 DirectionsWaypoint 数组。路标将通过让路线经过指定地点而改变路线。将路标指定为带有如下字段的一个对象常量：

                        ◦location 将要进行地址解析的路标地点指定为 LatLng 或 String。
                        ◦stopover 是一个布尔值，用于指示路标是否为路线上的停留点，这可以将这条路线分为两条路线。
                        （有关路标的详细信息，请参见下文的在路线中使用路标。）

                        •optimizeWaypoints（可选）指定可以优化使用所提供 waypoints 的路线，以提供尽可能短的路线。如果为 true，路线服务将在 waypoint_order 字段中传回重新排序的 waypoints。（有关详细信息，请参见下文的在路线中使用路标。）
                        •provideRouteAlternatives（可选）设置为 true 时，指定路线服务可以在响应中提供多条备选路线。请注意，提供备选路线可能增加服务器的响应时间。
                        •avoidHighways（可选）设置为 true 时，表示计算的路线应避开主要公路（如果可能）。•avoidTolls（可选）设置为 true 时，表示计算的路线应避开收费道路（如果可能）。•region（可选）指定区域代码，该区域代码指定为 ccTLD（“顶级域”）双字符值。（有关详细信息，请参见下文的区域偏向。）
                        */
                    // 获取从“北京市南坞”到“北京市人民大学”的线路
//                    directionsService.route(request, function(response, status) {
//                        if (status == google.maps.DirectionsStatus.OK) {
//                            directionsDisplay.setDirections(response);
//                            path = response.routes[0].overview_path;
//                            if (path) {
//                                timer = window.setInterval(function() {
//                                    if (!marker) {
//                                        marker = new google.maps.Marker({ position: path[index++], map: map });
//                                    } else {
//                                        if (index < path.length) {
//                                            marker.setPosition(path[index++]);
//                                        } else {
//                                            index = 0;
//                                            window.clearInterval(timer);
//                                        }
//                                    }
//                                }, msg.speed);//30是运动时间
//                            }
//                        }
//                    });
                },
                dataType:'json'
            });
        }
</script>

<body onLoad="init();">
    <div style="width:1026px; height:710px;margin:40px;clear: both;">
        <div class="panel-header"><div class="panel-title">显示轨迹</div><div class="panel-tool"></div></div>
        <div id="map" width="1024" height="700" title="显示轨迹" style="width:1024px; height:700px;border: 1px solid #99BBE8;"></div>
    </div>
</div><!-- form -->
